<template>
  <div class="flex-col justify-start page">
    <div class="flex-col justify-start section">
      <div class="flex-col justify-start section_2">
        <div class="flex-col section_3 space-y-35">
          <div class="flex-col items-start group">
            <div>
              <span class="font_2">计次 {{ userInfo.is_nums }}</span>
              <span class="font_1 text">/{{ userInfo.nums }}</span>
            </div>
            <span class="text_2">RbookTool</span>
            <span class="font_2 text_3"> {{dateDiff(userInfo.end_time)}} </span>
          </div>
          <div class="flex-col justify-start relative group_2" >
            <div class="flex-col section_4 space-y-21" style="padding-right:0;">
              <span class="self-start font_1 text_5">文件列表 ({{listData.length}})</span>
              <div class="loadingDiv" v-if="showloading"><van-loading type="spinner" /></div>

              <div class="flex-col space-y-20 listDiv">
                <template v-for="(item, i) in listData">
                  <van-swipe-cell :key="i">
                    <div class="flex-row justify-between">
                      <div class="flex-row space-x-14">
                        <div class="flex-col justify-start items-center relative text-wrapper">
                          <span class="font_4">{{ getExtension(item.title).toLocaleUpperCase() }}</span>
                        </div>
                        <div class="flex-col items-start space-y-6">
                          <span class="font_3">{{ item.title }}</span>
                          <span class="font_5">{{ item.status_item }}</span>
                        </div>
                      </div>
                      <span class="self-start font_6 text_6">{{ sizeTostr(item.filesize) }}</span>

                    </div>
                    <template #right>
                      <van-button style="margin-left:1rem;" square text="删除" type="danger" class="delete-button"
                        @click="deleteFile(item)" />
                    </template>
                  </van-swipe-cell>
                </template>
              </div>

            </div>
            <div class="flex-col justify-start items-center self-center image-wrapper shareImg" @click="onShow">
              <img class="image_2"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717914643639343690.png" />
            </div>
            <div class="flex-row justify-between items-center search pos">
              <!-- <span class="font_3 text_4">请输入文件标识</span> -->
              <input class="font_3 text_4 border_none" type="text" v-model="fieldId" placeholder="请输入文件标识">

              <img class="image"
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/d13a542d574c1905b288e5bd252117b5.png"
                @click="addbookshelf" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="popupVisible" position="bottom">
      <Alleart />
    </van-popup>
  </div>
</template>

<script>
import Alleart from '../../components/alleart/alleart.vue';

export default {
  inject: ['reload'],
  components: { Alleart },
  data() {
    return {
      popupVisible: false,
      list_j2JJzkVp: [null, null, null, null, null, null],
      listData: [],
      uuid: '',
      fieldId: '',
      userInfo: {},
      showloading: false
    };
  },
  created() {
    let geturl = window.location.href
    let getqyinfo = geturl.split('?')[1]   //qycode=1001&qyname=%E4%BC%81%E4%B8%9A%E5%BF%99   截取到参数部分
    let getqys = new URLSearchParams('?' + getqyinfo)  //将参数放在URLSearchParams函数中
    this.uuid = getqys.get('uuid')   //1001
  },
  mounted() {
    this.getUerInfo(this.uuid)
  },
  methods: {
    addbookshelf() {
      if (!this.fieldId) { this.$toast.fail('请输入文件标识！'); return; }
      let params = {
        uuid: this.uuid,
        title: this.fieldId
      }
      this.$http.post('/addbookshelf', params).then(res => {
        if (res.data.code == 1) {          this.reload()

          this.$toast.success(res.data.msg);
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    },
    deleteFile(item) {
      if (!item.status == 0) { this.$toast.fail('该信息不允许删除哦'); return }
      let _this = this
      this.$dialog.alert({
        message: '确认删除'
      }).then(() => {
        // on close
        _this.$http.post('/delbookshelf', { key: item.key }).then(res => {
          if (res.data.code == 1) {
            _this.$toast.success(res.data.msg);
            this.reload()
          } else {
            _this.$toast.fail(res.data.msg);
          }
        })
      });

    },
    getUerInfo(uuid) {
      // if (!uuid) { uuid = '274977f8-439c-42ce-aab4-587435a07898' } //获取用户的uuid
      this.$http.post('/getuserinfo', { uuid }).then(res => {
        if (res.data.code == 1) {
          this.userInfo = res.data.data
          localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
          if (this.userInfo.uuid) {
            this.uuid = this.userInfo.uuid;
            this.getList(this.userInfo.uuid)
          }
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    },
    getList(uuid) {
      // let uuid = '274977f8-439c-42ce-aab4-587435a07898'
      this.showloading = true;
      this.$http.post('/getbookshelflist', { uuid }).then(res => {
        if (res.data.code === "0") {
          // this.$toast.success({
          //   message: res.data.msg,
          // })
          this.listData = res.data.data

        } else {
          this.$toast.fail(res.data.msg);
        }
      })
      this.showloading = false
    },
    // 只获取后缀名
    getExtension(name) {
      if (name.lastIndexOf(".") > 0) {
        return name.substring(name.lastIndexOf(".") + 1)
      } else {
        return 'Lose'
      }
    },
    sizeTostr(size) {
      var data = "";
      if (size < 1 * 1024) { //如果小于1KB转化成B
        data = size.toFixed(2) + "B";
      } else if (size < 1 * 1024 * 1024) {//如果小于1MB转化成KB
        data = (size / 1024).toFixed(2) + "KB";
      } else if (size < 1 * 1024 * 1024 * 1024) { //如果小于1GB转化成MB
        data = (size / (1024 * 1024)).toFixed(2) + "MB";
      } else { //其他转化成GB
        data = (size / (1024 * 1024 * 1024)).toFixed(2) + "GB";
      }
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {//当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
    dateDiff(enddate) {
      var time = "";
      if ( enddate==""){
        var time = "倒计时 - 天";
      }else{
        var date = new Date(enddate).getTime() - new Date().getTime();
        var days    = date / 1000 / 60 / 60 / 24;
        var daysRound   = Math.floor(days);
        var hours    = date/ 1000 / 60 / 60 - (24 * daysRound);
        var hoursRound   = Math.floor(hours);
        var minutes   = date / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
        var minutesRound  = Math.floor(minutes);
        var seconds   = date/ 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
        var secondsRound  = Math.floor(seconds);
        var time = "倒计时"+(daysRound+"天"+hoursRound +"时"+minutesRound+"分"+secondsRound+"秒");
      }
      return time;
    },
    onShow() {
      this.popupVisible = true;
    },
    onClose() {
      this.popupVisible = false;
    }
  },
};
</script>

<style scoped lang="css">
.listDiv{
  padding-right:2rem;
  height: calc(100vh - 337px);
  overflow: auto;
}
.shareImg {
  position: fixed;
  bottom: 1rem;
  left: 39%;
}

.loadingDiv {
  position: absolute;
  right: 193px;
  top: 54px;
}

.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.section {
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/25d62c57197bfc6988e861d96efb8ab9.png');
  background-position: 0% 0%;
  background-size: 23.44rem 50.75rem;
  background-repeat: no-repeat;
}

.section_2 {
  background-color: #000000;
}

.section_3 {
  padding-top: 3.75rem;
  background-color: #000000;
}

.space-y-35>*:not(:first-child) {
  margin-top: 2.19rem;
}

.group {
  padding: 0 2.5rem;
}

.border_none {
  border: none;
}

.font_2 {
  font-size: 0.88rem;
  font-family: 'PingFang SC';
  line-height: 1.25rem;
  font-weight: 600;
  color: #fefeff;
}

.font_1 {
  font-size: 1.13rem;
  font-family: 'PingFang SC';
  line-height: 1.56rem;
  font-weight: 600;
}

.text {
  color: #fefeff;
}

.text_2 {
  margin-top: 0.25rem;
  color: #fefeff;
  font-size: 2.38rem;
  font-family: 'PingFang SC';
  font-weight: 600;
  line-height: 3.31rem;
}

.text_3 {
  margin-top: -0.25rem;
}

.group_2 {
  padding-top: 1.88rem;
}

.section_4 {
  padding: 3.06rem 2rem 1rem;
  background-image: linear-gradient(0deg, #fefeff 0%, #ffffff 100%);
}

.space-y-21>*:not(:first-child) {
  margin-top: 1.31rem;
}

.text_5 {
  color: #060518d6;
}

.space-y-20>*:not(:first-child) {
  margin-top: 1.25rem;
}

.space-x-14>*:not(:first-child) {
  margin-left: 0.88rem;
}

.text-wrapper {
  padding: 1rem 0;
  background-color: #524ce0;
  box-shadow: -0.31rem 0.31rem 0.63rem -0.31rem #6b696980;
  border-radius: 0.63rem;
  width: 3rem;
  height: 3rem;
}

.font_4 {
  font-size: 0.75rem;
  font-family: 'PingFang SC';
  line-height: 1.06rem;
  font-weight: 600;
  color: #fefeff;
}

.space-y-6>*:not(:first-child) {
  margin-top: 0.38rem;
}

.font_3 {
  font-size: 1rem;
  font-family: 'PingFang SC';
  line-height: 1.38rem;
  font-weight: 500;
  color: #060518d6;
}

.font_5 {
  font-size: 0.75rem;
  font-family: 'PingFang SC';
  line-height: 1.06rem;
  font-weight: 600;
  color: #060518a3;
}

.font_6 {
  font-size: 0.75rem;
  font-family: 'PingFang SC';
  line-height: 1.06rem;
  font-weight: 600;
  color: #060518;
}

.text_6 {
  margin-top: 1.81rem;
}

.image-wrapper {
  padding: 1rem 0;
  filter: drop-shadow(-0.31rem 0.31rem 0.31rem #6b696980);
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717914643600668674.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 4.56rem;
}

.image_2 {
  width: 2.38rem;
  height: 2.38rem;
  position: relative;
  left: 0.3rem;
}

.search {
  padding: 0.94rem 0.88rem 0.94rem 1.75rem;
  background-color: #ffffff;
  box-shadow: 0px 1.25rem 1.25rem 0px #5a5a5a1a;
  border-radius: 1.88rem;
}

.pos {
  position: absolute;
  left: 0.69rem;
  right: 0.63rem;
  top: 0;
}

.text_4 {
  color: #747474;
  font-weight: 600;
}

.image {
  border-radius: 50%;
  width: 1.88rem;
  height: 1.88rem;
}
</style>
